<template>
  <div>
     <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right"  style="margin:20px 0;">
      <el-breadcrumb-item :to="{ path: '/repair/repairList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 列表 -->
    <el-table
      border
       v-loading="loading"
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="createTime" label="发布日期" width="100">
      </el-table-column>
      <el-table-column property="title" label="标题" width="120">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        min-width="200px"
        property="content"
        label="内容"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        min-width="80px"
      >
        <template slot="header" slot-scope="scope">
          <el-button type="primary" @click="isShow('add')" >添加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="lookDetail(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteRow(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看详情 -->
    <el-dialog
      title="公告内容"
      :visible.sync="detailVisible"
      v-bind="noticDetail"
    >
      <el-card class="box-card">
        <!-- <h3></h3> -->
        <h2>{{ noticDetail.title }}</h2>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <p>{{ noticDetail.content }}</p>
      </el-card>
    </el-dialog>
    <!-- 添加公告 -->
    <el-dialog title="内容" :visible.sync="addVisible">
      <el-form
        :model="addForm"
        status-icon
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            type="text"
            v-model="addForm.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
       
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="addForm.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add('addForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {findAll,addNotice,deleteNotice} from '../../api/notice'
export default {
  data() {
    return {
      loading: false, //是显示加载
      addVisible: false, //控制添加内容是否显示
      detailVisible: false, //控制详情内容是否显示
      noticDetail: { title: "", content: "" },
      tableData: [
        {
          createTime: "",
          title: "",
          content:""
        },
      ],
      addForm:{
        title:'',
        content:''
      }
    };
  },


  /**
   * 创建完毕,初始化数据
   */

  created() {
    this.getData();
  },

  methods: {
    isShow(name){
      if(name=="detail"){
        this.detailVisible = true;
      }else if(name=="add"){
        this.addVisible=true;
      }
    },
    //初始化列表
    getData(){
      this.loading= true, 
      findAll().then((res)=>{
        console.log(res.data)
        this.loading = false;
        if(res.code==200){
          this.tableData=res.data
        }else{
            this.$message({
              type: "info",
              message: res.msg,
            });
        }
      }) .catch((err) => {
          this.loading = false;
          this.$message.error("加载失败，请稍后再试！");
        });
    },
    //删除一行内容
    deleteRow(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteNotice(row.id).then((res)=>{
            if(res.code==200){
              this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.getData();
            }else{
                this.$message({
                  type: "info",
                  message: res.msg,
                });
            }
          }) .catch((err) => {
              this.$message.error("删除失败，请稍后再试！");
            })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除！",
          });
        });
    },
    //查看详情
    lookDetail(index, row) {
     this.detailVisible = true;
      if (row != undefined && row != "undefined") {
        (this.noticDetail.title = row.title),
          (this.noticDetail.content = row.content);
      }
    },
    //添加公告
    add(addData){
      console.log(this.addForm)
      addNotice(this.addForm).then((res)=>{
        this.addVisible=false;
        if(res.code==200){
           this.$message({
              type: "success",
              message: "添加成功！",
            });
            this.getData();
        }else{
            this.$message({
              type: "info",
              message: res.msg,
            });
        }
      }) .catch((err) => {
        this.addVisible=false;
          this.$message.error("添加失败，请稍后再试！");
        });
      
    }
  },
};
</script>

<style>
</style>